<template>
  <div id="siteEdit">
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="700px" :closable="false">
      <Form ref= "formValidate" :model="rowData" label-position="right" :label-width="80" :rules="rules">
        <FormItem :label="$t('code')" prop="code"><Input v-model="rowData.code" :readonly="modal.readonly" maxlength=30></Input></FormItem>
        <FormItem :label="$t('name')" prop="name"><Input v-model="rowData.name" :readonly="modal.readonly" maxlength=30></Input></FormItem>
        <FormItem label="IP" prop="host"><Input v-model="rowData.host" :readonly="modal.readonly" maxlength=30></Input></FormItem>
        <FormItem :label="$t('port')" ><Input v-model="rowData.port" :readonly="modal.readonly" maxlength=10></Input></FormItem>
        <FormItem :label="$t('play_url')" prop="url"><Input v-model="rowData.url" :readonly="modal.readonly" maxlength=255></Input></FormItem>
        <FormItem :label="$t('manufacturer')"><Input v-model="rowData.manufacture" :readonly="modal.readonly" maxlength=50></Input></FormItem>
        <FormItem :label="$t('firmware_ver')"><Input v-model="rowData.softVersion" :readonly="modal.readonly" maxlength=50></Input></FormItem>
        <FormItem :label="$t('status')"> <RadioGroup v-model="rowData.state" :readonly="modal.readonly">
          <Radio :label=1 border>{{$t('device_status_1')}}</Radio>
          <Radio :label=2 border>{{$t('device_status_2')}}</Radio>
          <Radio :label=3 border>{{$t('device_status_3')}}</Radio>
        </RadioGroup></FormItem>
        <FormItem :label="$t('organization')">
          <OrganizationTree ref="edtOrgSelect" v-model="rowData.orgId" width="200px"  :readonly="modal.readonly"></OrganizationTree>
        </FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >{{$t('save')}}</Button>
            <Button @click="close">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {ipValid, portValid} from "_c/validate/FormValidate";
import OrganizationTree from '@/components/topnav/OrganizationTree';
import {addSite,updateSite} from '@/api/site';
import {apiResult} from "@/libs/util";
export default {
  name:"siteEdit",
  components:{OrganizationTree},
  computed:{
    rules() {
      return {code:[{required: true, message: this.$t('code_must_be_enter'), trigger: 'blur'}],
        name:[{required: true, message: this.$t('name_must_be_enter'), trigger: 'blur'}],
        host:[{required: true, message: this.$t('ip_must_be_enter'), trigger: 'blur'}],//,{type:'string',validator: ipValid, message: '请输入有效的IP地址', trigger: 'blur'}],
        port:[{required: true, message: this.$t('port_must_be_enter'), trigger: 'blur'}],//,{type: 'string',validator: portValid, message: '请输入有效的端口', trigger: 'blur'}],
        url:[{required: true, message: this.$t('play_url_must_be_enter'), trigger: 'blur'}]}
    }
  },
  data(){
    return{
      modal:{
        show:false,
        loading:false,
        title:"",
        action:"VIEW",
        callback:null
      },
      rowData:{
        id: null,
        code: null,
        name: null,
        type: 1, //采集站
        orgId: null,
        host: null,
        port: 8080,
        url: null,
        manufacture: null,
        softVersion: null,
        orgName: null,
        state: 1,
      },

    }


  },
  methods:{
    openDialog: function (action,row, callback) {
      this.modal.show=true;
      this.modal.readonly=false;
      this.modal.callback = callback;
      this.modal.show = true;
      this.modal.action = action;
      if (action=="ADD"){
        this.modal.title=this.$t('add');
        this.$refs["formValidate"].resetFields();
      }else if (action=="VIEW"){
        this.modal.title=this.$t('browse');
        this.$refs["formValidate"].resetFields();
        this.modal.readonly=true;
      }else if (action=="EDIT"){
        this.modal.title=this.$t('edit');
      }
      if (row != null) {
        this.rowData = row;
      }
    },
    save(){
      let that = this;

/*      this.$refs["formValidate"].validateField("port", (valid) => {
        console.log(valid);
      });*/

      this.$refs["formValidate"].validate((valid) => {
        if (that.modal.action == "VIEW"){that.close();}
        //console.log(this.rowData.port);
        if (valid) {
          /** 新增 */
          if (that.rowData.id == null){
            addSite(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close();
              });
            })
          }else{
            updateSite(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close()
              });
            })
          }
        } else {
          that.$Message.error(this.$t('data_check_error'));
          return;
        }
      })
    },
    close(){
      this.modal.show=false;
      this.$refs["formValidate"].resetFields();
    }
  }

}
</script>
<style lang="less">
@import ".././template";
</style>
